<template>
  <div>
    <el-popover
      ref="popover_delete"
      placement="top"
      width="160">
      <p>确定删除这个节点吗？</p>
      <div style="text-align: center; margin: 0">
        <el-button type="primary" size="mini" @click="deleteNode">确定</el-button>
      </div>
    </el-popover>
    <el-card class="node-card">
      <h3>{{node.workflowNodeVo.workFlowNodeName}}
        <span style="float: right" v-if="!search && !auditor">
          <el-button type="primary" round size="mini" icon="el-icon-plus" v-if="node.workflowNodeVo.bpmnNodeId !== 'end_event_id'" @click="open('add')"></el-button>
          <el-button type="success" round size="mini" icon="el-icon-edit" v-if="node.workflowNodeVo.bpmnNodeId !== 'end_event_id'" @click="open('put')"></el-button>
          <el-button type="danger" round
                     v-popover:popover_delete
                     size="mini"
                     icon="el-icon-delete"
                     v-if="node.workflowNodeVo.bpmnNodeId !== 'end_event_id' && node.workflowNodeVo.bpmnNodeId !== 'start_user_task_id'"></el-button>
        </span>
        <span style="float: right" v-if="auditor">
          <el-button type="success" round size="mini" icon="el-icon-edit" v-if="node.workflowNodeVo.bpmnNodeId !== 'end_event_id'" @click="open('put')"></el-button>
        </span>
      </h3>
      <el-collapse accordion v-if="node.workflowNodeVo.bpmnNodeId !== 'end_event_id'">
        <el-collapse-item title="节点审核人" name="1" v-if="node.workflowNodeVo.bpmnNodeId !== 'start_user_task_id' && node.workflowNodeVo.show_auditorType && node.workflowAudiorVo.length > 0">
          <p>当前节点审核人类型为： {{node.workflowNodeVo.show_auditorType}}</p>
          <p>当前节点审核人是否可以驳回： {{node.workflowNodeVo.type === 1 ? '是' : '否'}}</p>
          <el-tag v-for="(audior, aIndex) in node.workflowAudiorVo"
                  class="auditor"
                  :key="aIndex">{{audior.show_userId}}</el-tag>
        </el-collapse-item>
        <el-collapse-item title="节点的链接" name="2">
          <div v-for="(branch, bIndex) in node.workFlowBranchPojoList" :key="bIndex">
            <workflow-node-next
              :branch="branch"
              :node="$store.getters['WORKFLOW/tree'][branch.workflowBranchVo.toBranch]"></workflow-node-next>
          </div>
        </el-collapse-item>
      </el-collapse>
    </el-card>
  </div>
</template>

<script>
  import {AutoVue} from '~/plugins/Tools';
  import workflowNodeNext from './workflowNodeNext.vue';
  export default AutoVue({
    name: 'workflowNode',
    data: {},
    props: {
      node: {
        type: Object,
        required: true,
      },
      search: {
        type: Boolean,
        default: false,
      },
      auditor: {
        type: Boolean,
        default: false,
      },
    },
    components: {
      workflowNodeNext,
    },
    store: ['WORKFLOW', 'DICTIONARY_workflow'],
    methods: {
      open (type) {
        this.$emit('node-open', type, this.node);
      },
      deleteNode () {
        this.$emit('node-delete', this.node);
      },
    },
    computed: {
    },
  });
</script>

<style scoped lang="scss">
  .auditor {
    margin: 1px 0 1px 5px;
  }
  @media screen and (max-width: 800px) {
  }
</style>
